<template>
  <div class="activity-newer">
    <div class="activity-newer-header">
      <img :src="logImg" alt="分秒金融">
      <div @click="backToHome">返回首页</div>
    </div>
    <div class="activity-newer-banner">
      <img :src="require('./banner.png')" alt="">
    </div>
    <ul class="activity-newer-register">
      <li class="activity-newer-register-info">
        <p>注册即送多重好礼</p>
      </li>
      <li class="activity-newer-register-phone">
        <img src="./n-phone.png" alt="手机号">
        <input type="number" v-model="phoneNum" placeholder="请输入手机号">
      </li>
      <li class="activity-newer-register-sms">
        <div>
          <img src="./n-sms.png" alt="验证码"> 
          <input type="number" placeholder="请输入验证码" v-model="smsVer">
        </div>

        <div @click="getSmsCode">
          <span v-show="smsState === 'init'">获取验证码</span>
          <span v-show="smsState === 'loading'">{{ countDown }}s</span>
          <span v-show="smsState === 'finished'">重新获取</span>
        </div>
      </li>
      <li class="activity-newer-register-password">
        <img src="./n-signup.png" alt="密码"> 
        <input type="text" placeholder="请设置登录密码" v-model="password" >
      </li>
      <li class="activity-newer-register-btn" @click="register"><p>马上领取</p></li>
      <p class="activity-newer-register-login">
        <span>市场有风险，选择需谨慎</span>
        <span @click="toLogin" v-show="type === ''">已注册 立即登录>></span>
      </p>
    </ul>
    <div class="activity-newer-title">
      <img :src="require('./title1.png')" alt="">
    </div>
    <div class="activity-newer-item1">
      <img :src="require('./600@2x.png')" alt="">
      <img :src="require('./688@2x.png')" alt="">
      <p>注册即享600元红包，实名认证再送688元</p>
    </div>
    <div class="activity-newer-title">
      <img :src="require('./title2.png')" alt="">
    </div>
    <div class="activity-newer-item2" @click="AndroidOrIos">
      <good v-bind="goodData"></good>
    </div>
    <div class="activity-newer-title">
      <img :src="require('./title3.png')" alt="">
    </div>
    <div class="activity-newer-item3">
      <img :src="require('./card.png')" alt="">
      <p>注册即享600元红包，实名认证再送688元</p>
    </div>
    <div class="activity-newer-title">
      <img :src="require('./title4.png')" alt="">
    </div>
    <ul class="activity-newer-item4">
      <li>
        <img :src="require('./item1.png')" alt="">
        <div>
          <h3>实力控股</h3>
          <p>央企多级全资公司参股，注册资金5亿元</p>
        </div>
      </li>
      <li>
        <img :src="require('./item2.png')" alt="">
        <div>
          <h3>项目优势</h3>
          <p>政府、央企、大型国有公司及产业基金项目</p>
        </div>
      </li>
      <li>
        <img :src="require('./item3.png')" alt="">
        <div>
          <h3>资金安全</h3>
          <p>银行级别风控，第三方资金存管</p>
        </div>
      </li>
      <li>
        <img :src="require('./item4.png')" alt="">
        <div>
          <h3>收益稳健</h3>
          <p>年化借款利率8%-13.9%，投资门槛低</p>
        </div>
      </li>
    </ul>
    <div class="activity-newer-btn">
      <img :src="require('./btn.png')" alt="" @click="goTop">
    </div>
  </div>
</template>

<script>
  import { Toast, Indicator } from 'mint-ui'
  import good from 'components/good'
  // 埋点做数据
  function fireEvent (eventType, eventName) {
    var PROPERTY_ID = '87fc7797cba24e669535152a92e239ba'
    var PING_SERVER_URL = 'http://advertiser.inmobiapis.com/tpce/v1/events/' + eventType + '?trackingPartner=InMobi'
    var pageData = {}
    if (typeof InmobiPixel !== 'undefined') {
      /* global InmobiPixel */
      window.inmobiPixel = new InmobiPixel()
      window.inmobiPixel.init({
        pingServer: PING_SERVER_URL,
        propertyId: PROPERTY_ID,
        domain: 'fenmiaojinrong.com'
      })
    }
    window.inmobiPixel.ping(eventName, pageData)
  }

  function fireCustomEvent (eventName) {
    fireEvent('custom', eventName)
  }

  export default {
    data () {
      return {
        type: '',
        token: '',
        w: 0,
        h: 0,
        phoneNum: '',
        smsVer: '',
        password: '',
        countDown: 60,
        smsState: 'init', // init || loading || finished
        invitNum: '',
        inviteCode: '',
        timer: null,
        logImg: require('assets/tuiguang_logo@3x.png'),
        goodData: null
      }
    },
    computed: {
      btnHeight () {
        return (2870 / 4589) * this.h
      },
      registerHeight () {
        return (374 / 4589) * this.h
      }
    },
    methods: {
      AndroidOrIos () {
        if (this.type === 'android' || this.type === 'ios') {
          const h5NativeConfig = {
            viewNum: '4',
            uuid: this.goodData.borrowOrder
          }
          window.location.href = 'nativejs://' + JSON.stringify(h5NativeConfig)
        } else {
          return
        }
      },
      fireDownloadEvent () {
        fireEvent('download', 'download')
      },
      invest () {
        window.scrollTo(0, 0)
      },
      toLogin () {
        this.$router.push('/login')
      },
      backToHome () {
        const h5NativeConfig = {
          viewNum: '6'
        }
        if (this.$route.query['type'] && this.$route.query['type'] !== '') {
          window.location.href = 'nativejs://' + JSON.stringify(h5NativeConfig)
          return
        }
        this.$router.push('/home')
      },
      goTop () {
        window.scrollTo(0, 0)
      },
      startCountDown () {
        if (this.smsState === 'loading') {
          return
        }
        this.countDown = 60
        this.smsState = 'loading'
        this.timer = setInterval(() => {
          this.countDown--
          if (this.countDown === 0) {
            clearInterval(this.timer)
            this.smsState = 'finished' // 60s结束
          }
        }, 1000)
      },
      getSmsCode () {
        if (!(/^1[34578]\d{9}$/.test(this.phoneNum))) {
          this.smsState = 'init'
          Toast('请输入正确的手机号码')
          return
        }

        this.$http.post(`/api/member/sendSmsCode?mobile=${this.phoneNum}`)
          .then((res) => {
            if (res.data.success) {
              // 发送短信成功
              console.log('发送成功')
              this.startCountDown()
              return
            } else {
              Toast(res.data.msg)
              this.smsState = 'finished'
              return
            }
          })
          .catch((err) => {
            this.smsState = 'finished'
            Toast(err)
          })
      },
      register () {
        const vm = this
        if (!(/^1[34578]\d{9}$/.test(this.phoneNum))) {
          Toast('请输入正确的手机号码')
          return
        }
        if (!(/^[a-zA-Z0-9]{6,18}$/.test(this.password))) {
          this.smsState = 'init'
          Toast('请输入6到18位的密码')
          return
        }
        if (this.smsVer.length !== 6) {
          Toast('短信验证码错误')
          return
        }
        this.$http.post('/api/member/regist', 'mobile=' + this.phoneNum + '&smsCode=' + this.smsVer + '&password=' + this.password + '&channelCode=2&inviteCode=' + this.invitNum + '&promotionCode=' + this.inviteCode)
        .then((res) => {
          if (res.data.success) {
            Toast({
              message: '恭喜您！注册成功！',
              iconClass: 'icon icon-success',
              duration: 600
            })
            if (this.type !== '') {
              return
            }
            this.fireDownloadEvent()
            // 注册成功后直接登陆
            vm.$http.post(`/api/member/login?loginName=${vm.phoneNum}&password=${vm.password}`)
              .then((res) => {
                if (res.data.success) {
                  vm.$cookie.set('acctKey', res.data.data, {
                    expires: '7D'
                  })
                  console.log(res.data)
                  Indicator.close()
                  console.log('获取数据成功')
                  vm.$router.push('/mine?from=register')
                } else {
                  Indicator.close()
                  Toast(res.data.msg)
                }
              })
              .catch((err) => {
                console.log(err)
              })
          } else {
            Toast(res.data.msg)
            console.log(res.data)
          }
        })
        .catch((err) => {
          Toast(err)
        })
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (4589 / 750)
      if (this.$route.query['invitNum'] && this.$route.query['invitNum'] !== '') {
        this.invitNum = this.$route.query['invitNum']
      }
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
      if (this.$route.query['from'] && this.$route.query['from'] !== '') {
        this.from = this.$route.query['from']
      }
      if (this.$route.query['mobile'] && this.$route.query['mobile'] !== '') {
        this.phoneNum = this.$route.query['mobile']
      }
      if (this.$route.query['type'] && this.$route.query['type'] !== '') {
        this.type = this.$route.query['type']
      }
      if (this.$route.query['token'] && this.$route.query['token'] !== '') {
        this.token = this.$route.query['token']
      }
      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=1&borrowNewhand=1`)
        .then((res) => {
          if (res.data.success) {
            this.goodData = res.data.data.list[0]
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    mounted () {
      // 页面加载后动态穿件script做数据埋点
      const script = document.createElement('script')
      script.setAttribute('type', 'text/javascript')
      script.setAttribute('charset', 'UTF-8')
      script.setAttribute('src', 'https://i.l.inmobicdn.net/ifctpads/IFC/pixel/inmobipixel.js')
      script.setAttribute('id', 'js_hook')
      script.onload = function () {
        console.log('script加载完成')
        fireCustomEvent('fmjr_lp')
      }
      var heads = document.getElementsByTagName('head')
      if (heads.length) {
        heads[0].appendChild(script)
      } else {
        document.documentElement.appendChild(script)
      }
    },
    components: {
      good
    },
    destroyed () {
      this.timer = null
      var heads = document.getElementsByTagName('head')[0]
      const script = document.getElementById('js_hook')
      heads.removeChild(script)
    }
  }
</script>

<style lang='scss'>
  @import '../../../common/scss/_variable.scss';

  .activity-newer {
    font-family: 'Microsoft YaHei', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 0;
    background: #f44938;
    &-header {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 130px;
      padding: 0 30px;
      z-index: $zIndex-2--activityOverBG;
      background: #fff;
      img {
        width: 222px;
        height: 60px;
      }
      div {
        box-sizing: border-box;
        width: 146px;
        height: 60px;
        color: $base-666;
        font-size: 30px;
        line-height: 60px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid $base-666;
      }
    }
    &-banner {
      img {
        width: 100%;
      }
    }
    &-title {
      text-align: center;
      margin: 60px 0 66px 0;
      img {
        width: 426px;
      }
    }
    &-item1 {
      width: 690px;
      height: 354px;
      margin: 0 auto;
      background: #fff;
      text-align: center;
      img {
        width: 244px;
        margin-top: 48px;
        &:nth-child(1) {
          margin-right: 50px;
        }
      }
      p {
        margin-top: 20px;
        font-size: 24px;
        color: $base-666;
      }
    }
    &-item3 {
      width: 690px;
      height: 300px;
      background: #fff;
      margin: 0 auto;
      text-align: center;
      img {
        width: 360px;
        margin-top: 44px;
      }
      p {
        font-size: 24px;
        color: $base-666;
        margin-top: -24px;
      }
    }
    &-item4 {
      box-sizing: border-box;
      width: 690px;
      height: 564px;
      background: #fff;
      margin: 0 auto;
      padding: 36px 50px;
      li {
        display: flex;
        align-items: center;
        height: 25%;
        img {
          width: 96px;
          height: 96px;
          margin-right: 26px;
        }
        div {
          h3 {
            font-size: 28px;
            color: $base-333;
            margin-bottom: 10px;
          }
          p {
            font-size: 24px;
            color: $base-999;
          }
        }
      }
    }
    &-item2 {
      width: 690px;
      margin: 0 auto;
      background: #fff;
    }
    input {
      outline: none;
    }
    &-bg {
      img {
        width: 100%;
      }
    }
    &-register {
      width: 100%;
      padding-top: 30px;
      img {
        width: (40vw/7.5);
        height: (40vw/7.5);
      }
      &-info {
        font-size: (30vw/7.5);
        color: #fff;
        text-align: center;
        margin-bottom: (45vw/7.5);
      }
      &-phone,
      &-password,
      &-btn {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 (46vw/7.5);
        width: (586vw/7.5);
        height: (92vw/7.5);
        margin: 0 auto;
        border-radius: (92vw/7.5);
        background: #fff;
        margin-bottom: (20vw/7.5);
        input {
          flex: 1 0 auto;
          height: 100%;
          z-index: 1000;
          font-size: (26vw/7.5);
          border: none;
          text-indent: (10vw/7.5);
        }
      }
      &-btn {
        background: url('./n-btn@2x.png') 0 0 no-repeat;        
        background-size: cover;
        text-align: center;
        line-height: (92vw/7.5);
        font-size: (30vw/7.5);
        color: #e6385b;
        p {
          width: 100%;
        }
      }
      &-sms {
        font-size: 0;
        display: flex;
        align-items: center;
        width: (586vw/7.5);
        height: (92vw/7.5);
        margin: 0 auto;
        border-radius: (92vw/7.5);
        margin-bottom: (20vw/7.5);
        justify-content: space-between;
        div {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 0 (46vw/7.5);
          height: (92vw/7.5);
          border-radius: (92vw/7.5);
          background: #fff;
          &:nth-child(1) {
            width: 60%;
          }
          &:nth-child(2) {
            width: 36%;
            background: #ffd255;
            font-size: (26vw/7.5);
            color: #e6385b;
            text-align: center;
            padding: 0 (26vw/7.5);
            span {
              width: 100%;
            }
          }
        }
        input {
          width: 100%;
          height: 100%;
          z-index: 1000;
          font-size: (26vw/7.5);
          border: none;
          text-indent: (10vw/7.5);
        }
      }
      &-login {
        display: flex;
        justify-content: space-between;
        font-size: (24vw/7.5);
        width: (586vw/7.5);
        margin: 0 auto;
        color: #fff;
      }
    }
    &-btn {
      text-align: center;
      padding: 80px 0 ;
      img {
        width: 348px;
        height: 80px;
      }
    }
  }
</style>
